<template>
  <div class="song-audio">
    <audio ref="player"
           :src="attachImageUrl(url)"
           controls="controls"
           preload="true"
           @canplay="startPlay"
           @ended="ended"
           @timeupdate="timeupdate"
    ></audio>
  </div>
</template>
<script>
import {mapGetters} from 'vuex';

export default {
  name: 'song-audio',
  computed: {
    ...mapGetters([
      'id',               //歌曲id
      'url',              //歌曲地址
      'isPlay',           //播放状态
      'listOfSongs',     //当前歌曲列表
      'curTime',         //当前音乐的播放位置
      'changeTime',      //指定播放时刻
      'autoNext',        //用于自动触发播放下一首
      'volume',          //音量
      'listIndex',            //当前歌曲在歌单中的位置
    ])
  },
  watch: {
    //监听播放还是暂停
    isPlay() {
      this.togglePlay();
    },
    //跳转到指定播放时刻
    changeTime() {
      this.$refs.player.currentTime = this.changeTime;
    },
    //改变音量
    volume(val) {
      this.$refs.player.volume = val;
    }
  },
  methods: {
    //获取链接后准备播放
    startPlay() {
      let player = this.$refs.player;
      this.$store.commit('setDuration', player.duration);
      //开始播放
      player.play();
      this.$store.commit('setIsPlay', true);
    },
    //播放完成之后触发
    ended() {
      this.$store.commit('setIsPlay', false);
      this.$store.commit('setCurTime', 0);
      this.$store.commit('setAutoNext', true);
      this.next()
    },
    //开始、暂停
    togglePlay() {
      let player = this.$refs.player;
      if (this.isPlay) {
        player.play();
      } else {
        player.pause();
      }
    },
    //音乐播放时记录音乐的播放位置
    timeupdate() {
      this.$store.commit('setCurTime', this.$refs.player.currentTime);
    },
    //获取图片地址
    attachImageUrl(srcUrl) {
      return process.env.VUE_APP_BASE_API + srcUrl;
    },
    next() {
      console.log(this.listIndex)
      if (this.listIndex != -1 && this.listOfSongs.length > 1) {    //当前处于不可能状态或者只有只有一首音乐的时候不执行）
        if (this.listIndex < this.listOfSongs.length - 1) {                                 //不是最后一首音乐
          this.$store.commit('setListIndex', this.listIndex + 1);  //直接返回下一首
        } else {                                                      //当前是最后一首音乐
          this.$store.commit('setListIndex', 0);  //切换到第一首
        }
        this.toplay(this.listOfSongs[this.listIndex].url);
      }
    },
    toplay(url) {
      if (url && url != this.url) {
        this.$store.commit('setId', this.listOfSongs[this.listIndex].id);
        this.$store.commit('setUrl', url);
        this.$store.commit('setPicUrl', this.listOfSongs[this.listIndex].pic);
        this.$store.commit('setTitle', this.listOfSongs[this.listIndex].name);
        this.$store.commit('setArtist', this.listOfSongs[this.listIndex].name);
        this.$store.commit('setLyric', this.parseLyric(this.listOfSongs[this.listIndex].lyric));
        this.$store.commit('setIsActive', false);
        if (this.loginIn) {
          /*getCollectOfUserId(this.userId)
            .then(res => {
              for (let item of res) {
                if (item.songId == id) {
                  this.$store.commit('setIsActive', true);
                  break;
                }
              }
            })*/
        }
      }
    },
  }
}
</script>

<style>
.song-audio {
  display: none;
}
</style>
